<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>demo--入门02</title>
	<script src="jquery-3.4.1.min.js"></script>
<style type="text/css">
	#div1 button{
		width:100px;height: 30px; background: pink;
		font-size:16px;color:red;
	}

	#div1 div{
		width: 350px;
		height: 150px;
		background-color: #eee;
		border:1px solid black;
		color: gray;
		word-wrap: break-word;
		margin-top: 15px;
		display: none;
	}
	#div1 .active{
		background: orange;
	}




</style>
</head>
<body>

<div  id="div1">
	<button class="active">HTML5</button>
	<button>javaScript</button>
	<button>jq</button>

	<div style="display: block;">html5html5html5html5html5html5html5html5html5html5html5html5html5html5html5html5
	</div>

	<div>javaScriptjavaScriptjavaScriptjavaScriptjavaScriptjavaScriptjavaScriptjavaScriptjavaScript
	</div>

	<div>JQueryJQueryJQueryJQueryJQueryJQueryJQueryJQueryJQueryJQueryJQueryJQuery
	</div>


</div>


<script type="text/javascript">

	$(function(){

		var Btns = $("#div1").find("button")
		var Divs = $("#div1").find("div")

	// 1.添加点击事件
		Btns.click(function(){

		//2.将全部的按钮设为空
			Btns.attr("class",'')
		//3.将全部div设置为隐藏
			Divs.css("display","none")
			
		//4.将选中的按钮添加active类名
			$(this).attr("class","active")
		//5.在当前div中选中div的下标设为div的显示(this为选中的元素)
			Divs.eq($(this).index()).css("display","block")
		})

	})	


</script>


</body>
</html>